<template>
    <h2>显示分列表</h2>
    名称
    <input type="tetx" v-model="Uname"/>
    编号
    <input type="tetx" v-model="iw" />
    <input type="button" value="查询" @click="Show"/>
    <table border="1">
        <thead>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>状态</td>
                <td>数量</td>
                <td>时间</td>
                <td>描述</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.state==true?"开房":"关房"}}</td>
                <td>{{item.num}}</td>
                <td>{{item.time}}</td>
                <td>{{item.info}}</td>
                <td>
                    <input type="button" value="删除" @click="Shan(item.code)"/>
                </td>
            </tr>
        </tbody>
    </table>

    总共有{{pageinfo.pageCount}}业数据
    总共有{{pageinfo.totalCount}}条数据
    当前在{{pageinfo.PageIndex}}/{{pageinfo.pageCount}}页

    <a href="#" @click="FanYe('F')" style="margin-left:15px;">首页</a>
    <a href="#" @click="FanYe('L')" style="margin-left:15px;">上一页</a>
    <a href="#" @click="FanYe('N')" style="margin-left:15px;">下一页</a>
    <a href="#" @click="FanYe('E')" style="margin-left:15px;">尾页</a>

    <select v-model="xin" @change="Ye">
        <option :value="1">1/页</option>
        <option :value="2">2/页</option>
        <option :value="3">3/页</option>
        <option :value="4">4/页</option>

    </select>

    <input type="text" v-model="yema"/>
    <input type="button" value="跳转" @click="Tiao" />

</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRoute,useRouter} from 'vue-router'
    const route=useRoute();
    const router=useRouter();

    onMounted(()=>{
        Show();
    })

    const info=ref([{
        code:0,
        name: "",
        state: true,
        num: 0,
        time: "",
        info: ""
    }]);

    const pageinfo=ref({
        PageIndex:1,
        PageSize:2,
        pageCount:0,
        totalCount:0
    });

    const Uname=ref("");
    const iw=ref(0);

    const Show=()=>{
        axios.get("https://localhost:7272/api/Room/GetRoomByPage",{
            params:{
                PageIndex:pageinfo.value.PageIndex,
                PageSize:pageinfo.value.PageSize,
                name:Uname.value,
                id:iw.value
            }
        })
        .then(res=>{
            console.log(res.data);
            info.value=res.data.page_Info;
            pageinfo.value.pageCount=res.data.pageCount;
            pageinfo.value.totalCount=res.data.totalCount;
        })
    }

    const FanYe=(choose:any)=>{
        switch(choose){
            case 'F':
                pageinfo.value.PageIndex=1;
            break;
            case 'L':
                if(pageinfo.value.PageIndex<1+1){
                    alert('已经是第一页啦');
                    return;
                }
                pageinfo.value.PageIndex--;
            break;
            case 'N':
            if(pageinfo.value.PageIndex>pageinfo.value.pageCount-1){
                    alert('已经是最后一页啦');
                    return;
                }
                pageinfo.value.PageIndex++;
            break;
            case 'E':
                pageinfo.value.PageIndex=pageinfo.value.pageCount;
            break;
            
        }
        Show();
    }

    const yema=ref(0);
    const Tiao=()=>{
        pageinfo.value.PageIndex=yema.value;
        Show();
    }

    const xin=ref(0);
    const Ye=()=>{
        pageinfo.value.PageSize=xin.value;
        Show();
    }

    const Shan=(id:number)=>{
        if(confirm("确定要删除吗？")){
            axios.get("https://localhost:7272/api/Room/Shan",{
                params:{
                    id:id
                }
            })
            .then(res=>{
                if(res.data>0)
                {
                    alert('删除成功');
                    Show();
                }
                else
                {
                    alert('删除失败');
                }
            })
        }
    }

</script>
